<template>
  <div class="container">
    <el-dialog title="实体链接校核" :visible.sync="dialogVisible">
      <span>请确认实体链接主体的名称、属性是否需要根据客体内容进行更新。</span>
      <div class="proofread" v-loading="tableLoading">
        <div class="main">
          <div class="info">
            <div class="name">
              <span>实体名称：{{ mainEntityName }}</span>
              <el-link
                v-if="editable"
                class="name-action"
                :underline="false"
                type="primary"
                @click.native.prevent="updateName()"
                >更新名称</el-link
              >
            </div>
            <div>实体类别：{{ mainEntityTypename }}</div>
            <div>所属图谱：{{ graphName }}</div>
          </div>
          <el-table :data="mainPropertyList" class="km-table">
            <el-table-column label="属性" prop="propertyName"></el-table-column>
            <el-table-column
              label="属性值"
              prop="propertyValue"
            ></el-table-column>
            <el-table-column label="操作" v-if="editable">
              <template slot-scope="scope">
                <el-link
                  v-if="scope.row.canUpdate && !scope.row.isUpdated"
                  :underline="false"
                  type="primary"
                  @click.native.prevent="updatePropertyValue(scope.row)"
                  >更新</el-link
                >
                <el-link
                  v-if="scope.row.isUpdated"
                  :underline="false"
                  type="primary"
                  @click.native.prevent="cancelUpdatePropertyValue(scope.row)"
                  >撤销更新</el-link
                >
                <el-link
                  v-if="scope.row.isPushed"
                  :underline="false"
                  type="primary"
                  @click.native.prevent="cancelPushProperty(scope)"
                  >撤销加入</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="object">
          <div class="info">
            <div>实体名称：{{ objectEntityName }}</div>
            <div>实体类别：{{ objectEntityTypename }}</div>
            <div>所属文件：{{ objectFileName }}</div>
          </div>
          <el-table :data="objectPropertyList" class="km-table">
            <el-table-column label="属性" prop="propertyName"></el-table-column>
            <el-table-column
              label="属性值"
              prop="propertyValue"
            ></el-table-column>
            <el-table-column label="操作" v-if="editable">
              <template slot-scope="scope">
                <el-link
                  :underline="false"
                  type="primary"
                  disabled
                  v-if="scope.row.idPushed"
                  >已加入</el-link
                >
                <el-link
                  v-if="scope.row.canPush"
                  :underline="false"
                  type="primary"
                  @click.native.prevent="pushToMainEntity(scope.row)"
                  >加入</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{
          editable ? "取 消" : "关闭"
        }}</el-button>
        <el-button
          v-if="editable"
          type="primary"
          @click="confirm"
          :loading="confirmLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "proofread",
  data: () => {
    return {
      objectEntityName: "",
      objectEntityTypename: "",
      objectFileName: "",
      mainEntityName: "",
      mainEntityTypename: "",
      graphName: "",
      objectPropertyList: [],
      mainPropertyList: [],
      dialogVisible: true,
      tableLoading: false,
      confirmLoading: false,
    };
  },
  props: {
    id: {
      type: String,
    },
    action: {
      type: String,
    },
  },
  watch: {
    dialogVisible(value) {
      if (!value) {
        this.$emit("proofreadDialogOff");
      }
    },
  },
  computed: {
    editable() {
      return this.action == "edit";
    },
  },
  created() {
    // 获取实体链接信息
    this.getEntityLinkProofreadInfo(this.id);
  },
  methods: {
    getEntityLinkProofreadInfo(id) {
      this.tableLoading = true;
      this.$api.knowledgeGeneration
        .getEntityLinkProofreadInfo({ entity_link_id: id })
        .then((res) => {
          if (res.data.code !== 200) {
            this.$message.error(res.data.message);
            setTimeout(() => {
              this.dialogVisible = false;
            }, 1000);
            return;
          }

          const {
            objectEntityName,
            objectEntityTypename,
            objectFileName,
            mainEntityName,
            mainEntityTypename,
            graphName,
            objectPropertyList,
            mainPropertyList,
          } = res.data.data;
          objectPropertyList.forEach((objectProperty) => {
            let targetMainProperty = mainPropertyList.find(
              (mainProperty) =>
                mainProperty.propertyName == objectProperty.propertyName
            );
            if (!targetMainProperty) {
              objectProperty.canPush = true;
              objectProperty.idPushed = false;
            } else {
              // 保留原始值
              targetMainProperty.originalPropertyValue =
                targetMainProperty.propertyValue;

              targetMainProperty.canUpdate = true;
              targetMainProperty.isUpdated = false;
              targetMainProperty.idPushed = false;

              objectProperty.canPush = false;
            }
          });
          this.objectEntityName = objectEntityName;
          this.objectEntityTypename = objectEntityTypename;
          this.objectFileName = objectFileName;
          this.mainEntityName = mainEntityName;
          this.mainEntityTypename = mainEntityTypename;
          this.graphName = graphName;
          this.objectPropertyList = objectPropertyList;
          this.mainPropertyList = mainPropertyList;
          this.tableLoading = false;
        })
        .catch((error) => {
          console.log(error);
          this.$message.error(error.data.message);
          setTimeout(() => {
            this.dialogVisible = false;
          }, 1000);
        });
    },
    // 更新名称
    updateName() {
      this.mainEntityName = this.objectEntityName;
    },
    // 更新
    updatePropertyValue(targetMainProperty) {
      let targetObjectProperty = this.objectPropertyList.find(
        (objectProperty) =>
          objectProperty.propertyName == targetMainProperty.propertyName
      );
      targetMainProperty.propertyValue = targetObjectProperty.propertyValue;
      targetMainProperty.isUpdated = true;
      this.$forceUpdate();
    },
    // 撤销更新
    cancelUpdatePropertyValue(targetMainProperty) {
      targetMainProperty.propertyValue =
        targetMainProperty.originalPropertyValue;
      targetMainProperty.isUpdated = false;
      this.$forceUpdate();
    },
    // 撤销加入
    cancelPushProperty(scope) {
      this.mainPropertyList.splice(scope.$index, 1);
    },
    // 加入
    pushToMainEntity(targetObjectProperty) {
      targetObjectProperty.idPushed = true;
      targetObjectProperty.canPush = false;
      this.mainPropertyList.push({
        propertyName: targetObjectProperty.propertyName,
        propertyValue: targetObjectProperty.propertyValue,
        isPushed: true,
      });
    },
    confirm() {
      this.confirmLoading = true;
      let params = {
        entityLinkId: this.id,
        entityName: this.mainEntityName,
        userId: "1",
        propertyList: this.mainPropertyList.map((property) => ({
          propertyAttr: property.propertyName,
          propertyValue: property.propertyValue,
        })),
      };
      this.$api.knowledgeGeneration
        .saveEntityLink(params)
        .then((res) => {
          if (res.data.code !== 200) {
            this.$message.error(res.data.message);
            this.confirmLoading = false;
            return;
          }
          this.$message.success(res.data.message);
          this.$emit("proofreadDialogOff", true);
          this.dialogVisible = false;
        })
        .catch((error) => {
          this.$message.error(error.data.message);
        })
        .finally(() => {
          this.confirmLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  ::v-deep .el-dialog {
    max-height: 70vh;
    .el-dialog__body {
      max-height: calc(70vh - 200px);
      overflow: auto;
      @include scrollBar;
    }
  }
  .proofread {
    display: flex;
    padding: 40px 0;
    > .main {
      border-right: 1px solid #999;
      padding-right: 20px;
      flex: 1;
      > .info {
        > .name {
          display: flex;
          justify-content: space-between;
          .name-action {
            flex: none;
          }
        }
      }
    }
    > .object {
      padding-left: 20px;
      flex: 1;
    }
  }
}
</style>
